{% extends 'base.html' %}
{% load static %}

{% comment %}
    Мета-теги для SEO оптимизации страницы администратора
{% endcomment %}
{% block title %}Управление заявками - Корочки.есть{% endblock %}
{% block description %}Панель администратора для управления заявками на обучение{% endblock %}
{% block keywords %}админка, заявки, управление, статусы{% endblock %}

{% block content %}
<div class="container">
    {# Заголовок страницы #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="auth-form-title">Управление заявками</h2>
        <a href="{% url 'home' %}" class="btn btn-outline-primary">← На главную</a>
    </div>

    {# Проверка наличия заявок #}
    {% if applications %}
        <div class="row">
            {# Цикл по всем заявкам #}
            {% for application in applications %}
            <div class="col-md-6 mb-4">
                <div class="card application-card 
                    {% if application.status == 'new' %}application-new
                    {% elif application.status == 'in_progress' %}application-in-progress
                    {% elif application.status == 'completed' %}application-completed{% endif %}"
                    style="
                        background: linear-gradient(135deg, 
                            {% if application.status == 'new' %}rgba(40, 167, 69, 0.05){% elif application.status == 'in_progress' %}rgba(255, 193, 7, 0.05){% else %}rgba(108, 117, 125, 0.05){% endif %} 0%, 
                            rgba(255, 255, 255, 0.8) 100%);
                        border: 1px solid 
                            {% if application.status == 'new' %}rgba(40, 167, 69, 0.3){% elif application.status == 'in_progress' %}rgba(255, 193, 7, 0.3){% else %}rgba(108, 117, 125, 0.3){% endif %};
                        box-shadow: 0 4px 15px 
                            {% if application.status == 'new' %}rgba(40, 167, 69, 0.15){% elif application.status == 'in_progress' %}rgba(255, 193, 7, 0.15){% else %}rgba(108, 117, 125, 0.15){% endif %};
                    ">
                    <div class="card-body">
                        {# Заголовок с названием курса и статусом #}
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <h5 class="card-title">{{ application.get_course_display }}</h5>
                            <span class="badge 
                                {% if application.status == 'new' %}bg-success
                                {% elif application.status == 'in_progress' %}bg-warning
                                {% else %}bg-secondary{% endif %}">
                                {{ application.get_status_display }}
                            </span>
                        </div>
                        
                        {# Информация о заявке #}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-2">
                                    <strong class="text-primary">Пользователь:</strong><br>
                                    <span class="text-muted">{{ application.user.fio }}</span>
                                </div>
                                <div class="mb-2">
                                    <strong class="text-primary">Email:</strong><br>
                                    <span class="text-muted">{{ application.user.email }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-2">
                                    <strong class="text-primary">Телефон:</strong><br>
                                    <span class="text-muted">{{ application.user.phone }}</span>
                                </div>
                                <div class="mb-2">
                                    <strong class="text-primary">Дата начала:</strong><br>
                                    <span class="text-muted">{{ application.desired_start_date|date:"d.m.Y" }}</span>
                                </div>
                            </div>
                        </div>
                        
                        {# Дополнительная информация #}
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <div class="mb-2">
                                    <strong class="text-primary">Способ оплаты:</strong><br>
                                    <span class="text-muted">{{ application.get_payment_method_display }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-2">
                                    <strong class="text-primary">Подана:</strong><br>
                                    <span class="text-muted">{{ application.created_at|date:"d.m.Y H:i" }}</span>
                                </div>
                            </div>
                        </div>
                        
                        {# Форма для смены статуса #}
                        <div class="mt-3 pt-3 border-top">
                            <form method="post" action="{% url 'change_application_status' application.id %}" class="d-flex align-items-center gap-2">
                                {% csrf_token %}
                                <select name="status" class="form-select form-select-sm" style="width: auto; flex-grow: 1;">
                                    <option value="new" {% if application.status == 'new' %}selected{% endif %}>Новая</option>
                                    <option value="in_progress" {% if application.status == 'in_progress' %}selected{% endif %}>Идет обучение</option>
                                    <option value="completed" {% if application.status == 'completed' %}selected{% endif %}>Обучение завершено</option>
                                </select>
                                <button type="submit" class="btn btn-primary btn-sm">Изменить</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        {# Сообщение при отсутствии заявок #}
        <div class="text-center py-5">
            <h4 class="auth-form-title">Заявок пока нет</h4>
            <p class="text-muted">Как только пользователи подадут заявки, они появятся здесь.</p>
            <a href="{% url 'home' %}" class="btn btn-primary">На главную</a>
        </div>
    {% endif %}
</div>
{% endblock %}